<template>
    <div class="common-layout">
      <el-container>
        <el-main>
            <el-table :data="state.data" height="700" 
            @sort-change="sortChange"
            :cell-class-name="tableCellClassName"
            :default-sort="state.sort"
            style="width: 100%">

                <el-table-column type="expand">
                    <template #default="props">
                        <el-table :data="props.row.children" 
                        :cell-class-name="tableCellClassName"
                        :border="childBorder">
                            <el-table-column prop="ses" label="统计期" sortable width="120"/>
                            <el-table-column prop="netProfit" label="净利润" width="120"/>
                            <el-table-column prop="adjustedProfit" label="扣非净利润" width="120"/>
                            <el-table-column prop="incTotalRevenueYearOnYear" label="营业总收入同比增长率(%)" width="120"/>
                            <el-table-column prop="incNetProfitToShareholdersYearOnYear" label="归属母公司股东的净利润同比增长率(%)" width="120"/>
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column prop="ses" label="统计期" sortable/>
                <el-table-column prop="totalOperatingRevenue" label="营业收入"/>
                <el-table-column prop="goodsSaleAndServiceRenderCash" label="销售商品、提供劳务收到的现金" width="120"/>
                <el-table-column prop="netOperateCashFlow" label="经营活动产生的现金流量净额"/>
                <el-table-column prop="netProfit" label="净利润"/>
                <el-table-column prop="adjustedProfit" label="扣非净利润"/>
                <el-table-column prop="roe" label="ROE"/>
                <el-table-column prop="grossProfitMargin" label="毛利率"/>
                <el-table-column prop="netProfitMargin" label="净利率"/>
                <el-table-column prop="incTotalRevenueYearOnYear" label="营业总收入同比增长率(%)" width="120"/>
                <el-table-column prop="incNetProfitToShareholdersYearOnYear" label="归属母公司股东的净利润同比增长率(%)" width="120"/>
                <el-table-column prop="liabilityOnAssetRatio" label="负债率(%)" width="120"/>
            </el-table>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import { reactive, watch, ref } from 'vue';
import { getFinanceDataByStock } from '../service/finance'
import IndustryTag from './IndustryTag.vue';
import ToStockDetail from './ToStockDetail.vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { weekStockSearch } from '../stores/week'

export default {
    components: {
        IndustryTag,
        ToStockDetail
    },
    setup() {
        const base = "FinanceStockData"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const stockSearchStore = weekStockSearch()
        let { input } = storeToRefs(stockSearchStore)

        // 网址传参
        const {query: query} = useRoute()
        if(query.stock) {
            input.value = query.stock
        }

        const parentBorder = ref(false)
        const childBorder = ref(false)
        const state = reactive({
            data: [],
            raw_data: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || '' , 
                order: sessionStorage.getItem(sortOrderKey) || '' 
            }
        })

        const loadData = () => {
            getFinanceDataByStock(input.value).then( res => {
                state.raw_data = res.data
                state.data = []

                let countId = 0
                Object.keys(state.raw_data).forEach(key => {

                    let tmpData = state.raw_data[key]

                    let children = []
                    let root = null

                    countId += 1
                    tmpData.forEach(item => {
                        item.id = countId
                        if (item.ses == key) {
                            root = item
                        } else {
                            children.push(item)
                        }
                    })
                    if (root != null) {
                        root['children'] = children
                    } else {
                        root = children[0]
                        root['children'] = children
                    }

                    state.data.push(root)
                })
            })
        }

        loadData()

        // 只监听pinia中某一个值的变化
        watch(() => input.value, (newValue, oldValue) => {
            loadData()
        })

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            if ((row.incTotalRevenueYearOnYear < 0) && (column.label == '营业总收入同比增长率(%)')) {
                return 'lt0-cell'
            }
            if ((row.incNetProfitToShareholdersYearOnYear < 0) && (column.label == '归属母公司股东的净利润同比增长率(%)')) {
                return 'lt0-cell'
            }
            if ((row.netProfit < 0) && (column.label == '净利润')) {
                return 'lt0-cell'
            }
            if ((row.adjustedProfit < 0) && (column.label == '扣非净利润')) {
                return 'lt0-cell'
            }
            if ((row.grossProfitMargin < 0) && (column.label == '毛利率')) {
                return 'lt0-cell'
            }
            if ((row.netProfitMargin < 0) && (column.label == '净利率')) {
                return 'lt0-cell'
            }

            return ''
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        return {state,sortChange, tableCellClassName, childBorder}
    }
}
</script>

<style>
</style>